<template lang="html">
  <div class="releaseHouse" id="">
    <h2 v-title="'发布房源'"></h2>
    <ul class="releaseForm">
      <li @click="rentTypeCK">
        <span>租住类型</span>
        <div class="rightForm">
          <input type="text" name="" v-model="rentTypeValue.text" readOnly placeholder="请选择租赁类型">
          <img src="@/assets/images/right-icon@2x.png" width="10" alt="">
        </div>
      </li>
      <li>
        <span>小区名称</span>
        <div class="rightForm" @click="searchCommunity">
          <input type="text" name="" v-model="buildName" readOnly placeholder="请输入小区名称">
        </div>
      </li>
      <li>
        <span>楼层</span>
        <div class="rightForm">
          <input type="text" name="" v-model="floor" placeholder="请输入楼层" style="width:65%; margin-right:4px;">
          /
          <input type="text" name="" v-model="floorTotal" placeholder="总楼层" style="width:60px; text-align:right">
        </div>
      </li>
      <li @click="houseTypeCK">
        <span>户型</span>
        <div class="rightForm">
          <input type="text" name="" v-model="houseTypeValue" readOnly placeholder="请选择户型">
          <img src="@/assets/images/right-icon@2x.png" width="10" alt="">
        </div>
      </li>
      <li @click="orientationCK">
        <span>朝向</span>
        <div class="rightForm">
          <input type="text" name="" v-model="orientationValue.towardName" readOnly placeholder="请选择朝向">
          <img src="@/assets/images/right-icon@2x.png" width="10" alt="">
        </div>
      </li>
      <li @click="decorateCK">
        <span>装修</span>
        <div class="rightForm">
          <input type="text" name="" v-model="decorateValue.decorateName" readOnly placeholder="请选择装修">
          <img src="@/assets/images/right-icon@2x.png" width="10" alt="">
        </div>
      </li>
      <li>
        <span>面积</span>
        <div class="rightForm">
          <input type="text" name="" v-model="scale" placeholder="请输入面积">
        </div>
      </li>
    </ul>
    <ul class="releaseForm">
      <li @click="housingAllocation">
        <span>房屋配置</span>
        <div class="rightForm">
          <input type="text" name="" v-model="chooseHouseActName" readOnly placeholder="请选择房屋配置">
          <img src="@/assets/images/right-icon@2x.png" width="10" alt="">
        </div>
      </li>
      <li>
        <span>房屋地址</span>
        <div class="rightForm">
          <input type="text" name="" v-model="address" placeholder="请输入房屋地址">
        </div>
      </li>
      <li>
        <span>房屋栋号</span>
        <div class="rightForm">
          <input type="text" name="" v-model="buildingNum" placeholder="请输入具体栋号x栋xxx室">
        </div>
      </li>
    </ul>
    <ul class="releaseForm">
      <li v-if="rentTypeValue.rentType==1">
        <span>房租</span>
        <div class="rightForm">
          <input type="text" name="" v-model="rentMoney" placeholder="请输入房租（元）">
        </div>
      </li>
      <li v-else>
        <span>房租</span>
        <div class="rightForm">
          <input type="text" name="" v-model="rentDayMoney" placeholder="请输入房租（元）/晚">
        </div>
      </li>
      <li @click="payforLi" v-if="rentTypeValue.rentType==1">
        <span>付款方式</span>
        <div class="rightForm">
          <input type="text" name="" v-model="payforType" placeholder="请选择付款方式">
          <img src="@/assets/images/right-icon@2x.png" width="10" alt="">
        </div>
      </li>
      <li v-if="rentTypeValue.rentType==1">
        <span>服务费</span>
        <div class="">
          <button type="button" name="button" class="inlineBtn" @click="addOtherFee">添加费用</button>
        </div>

        <dl class="addOthers" v-for="(otherFee,index) in otherFeeValue">
          <dt>{{otherFee.otherFeeName}}</dt>
          <dd>
            <input type="text" name="" v-model="otherFee.value" placeholder="请输入费用（元）">
            <img src="@/assets/images/wrong@2x.png" width="10" alt="" @click="removeOtherFee(index)">
          </dd>
        </dl>


      </li>
      <li>
        <span>房源标签</span>
        <div class="">
          <button type="button" name="button" class="inlineBtn" @click="addHouseTag">添加标签</button>
        </div>
        <dl class="addOthers" v-for="(tagItem,index) in houseTag" :key="tagItem.key">
          <dt>{{tagItem.tag}}</dt>
          <dd>
            <input type="text" name="" v-model="tagItem.text" placeholder="请输入标签">
            <img src="@/assets/images/wrong@2x.png" width="10" alt="" @click="removeHouseTag(index)">
          </dd>
        </dl>
      </li>
    </ul>
    <ul class="releaseForm">
      <li>
        <span>详细描述</span>
        <textarea name="name" rows="5" v-model="description" placeholder="多行输入" class="desTextarea"></textarea>
      </li>
    </ul>

    <ul class="releaseForm">
      <li>
        <span>房屋照片</span>
        <div class="uploadDiv">
          <div class="uploadBox" v-for="(elem,index) in thumbnail" :key="elem.key">
            <span class="uploadImg">
              <mo-upload flag="'thumbnail'" @complete="uploadComplete2"
              :data-index='index' class="moupload" @click.native="getIndex(index)">
                <img :src="elem" alt="" class="Img">
              </mo-upload>
              <i class="deleteIcon" @click="deleteUploadImg(index)">
                <img src="@/assets/images/delete@2x.png" alt="" width="20" height="20">
              </i>
            </span>
            <select class="uploadSelect" v-model="selectPhone[index].albumId"
            :data-index="index"
            @change="chooseMedicine">
              <option v-for="album in phoneBalbum"
              :key="album.key"
               v-bind:value="album.albumId">
               {{album.albumName}}</option>
            </select>
          </div>
          <div class="uploadBox">
            <mo-upload flag="'thumbnail'" @complete="uploadComplete">
            </mo-upload>
            <select class="uploadSelect" @change="chooseMedicine2">
              <option v-for="elem in phoneBalbum"
              :key="elem.key"
               v-bind:value="elem.albumId">{{elem.albumName}}</option>
            </select>
          </div>
        </div>
      </li>
    </ul>

    <div class="fixedBottom">
      <button type="button" name="button" class="blockBtn" @click="submitRelease">确认</button>
    </div>

    <!-- 选择小区，地图查找 -->
    <community-map class="community" v-if="showCommunityMap"
    @communityMapEvent="communityMapEvent"
    ></community-map>
<!-- 底部弹出选择 -->
    <mt-popup
      v-model="isMintPicker"
      position="bottom" style="width:100%;">
      <mint-picker
      :slots="slots"
      :valueKey="valueKey"
      @mintPickerBtn="mintPickerBtn"
      ></mint-picker>
    </mt-popup>

    <!-- 户型 -->
    <mt-popup
      v-model="isHouseType"
      position="bottom" style="width:100%;">
      <house-type @houseTypeEvent="houseTypeEvent"></house-type>
    </mt-popup>

    <!-- 房屋配置 -->
    <mt-popup
      v-model="popupVisible"
      position="right"
      style="width:100%; height:100%;">
      <houseing-allocation @houseAllocation="houseAllocation"></houseing-allocation>
    </mt-popup>

    <!-- 付款方式 -->
    <mt-popup
      v-model="popupPayfor"
      position="right"
      style="width:100%; height:100%;">
      <payfor-type @chooseBtn="chooseBtn"></payfor-type>
    </mt-popup>


  </div>
</template>

<script src="./releaseHouse.js"></script>

<style lang="scss" src="./releaseHouse.scss"></style>
